<!-- Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. -->

<div class="ms-PeoplePicker ms-PeoplePicker--Facepile">
  <div class="ms-PeoplePicker-searchBox">
    <input class="ms-PeoplePicker-searchField" type="text" placeholder="Add members">
  </div>
  <!-- Suggested list -->
  <div class="ms-PeoplePicker-results">
    <div class="ms-PeoplePicker-peopleListHeader">
      <span>Suggested contacts</span>
    </div>
    <ul class="ms-PeoplePicker-peopleList">
      <li class="ms-PeoplePicker-peopleListItem ms-PeoplePicker-result">
        <div tabindex="0" role="button" class="ms-PeoplePicker-peopleListBtn">
          <div class="ms-Persona ms-Persona--selectable ms-Persona--sm">
            <div class="ms-Persona-imageArea">
              <div class="ms-Persona-initials ms-Persona-initials--darkBlue">RM</div>
            </div>
            <div class="ms-Persona-presence"></div>
            <div class="ms-Persona-details">
              <div class="ms-Persona-primaryText">Russel Miller</div>
              <div class="ms-Persona-secondaryText">Sales</div>
            </div>
          </div>
        </div>
      </li>
      <li class="ms-PeoplePicker-peopleListItem ms-PeoplePicker-result">
        <div tabindex="0" role="button" class="ms-PeoplePicker-peopleListBtn">
          <div class="ms-Persona ms-Persona--selectable ms-Persona--sm">
            <div class="ms-Persona-imageArea">
              <div class="ms-Persona-initials ms-Persona-initials--green">DF</div>
            </div>
            <div class="ms-Persona-presence"></div>
            <div class="ms-Persona-details">
              <div class="ms-Persona-primaryText">Douglas Fielder</div>
              <div class="ms-Persona-secondaryText">Public Relations</div>
            </div>
          </div>
        </div>
      </li>
      <li class="ms-PeoplePicker-peopleListItem ms-PeoplePicker-result">
        <div tabindex="0" role="button" class="ms-PeoplePicker-peopleListBtn">
          <div class="ms-Persona ms-Persona--selectable ms-Persona--sm">
            <div class="ms-Persona-imageArea">
              <div class="ms-Persona-initials ms-Persona-initials--blue">JF</div>
            </div>
            <div class="ms-Persona-presence"></div>
            <div class="ms-Persona-details">
              <div class="ms-Persona-primaryText">Jessica Fischer</div>
              <div class="ms-Persona-secondaryText">Public Relations</div>
            </div>
          </div>
        </div>
      </li>
      <li class="ms-PeoplePicker-peopleListItem ms-PeoplePicker-result">
        <div tabindex="0" role="button" class="ms-PeoplePicker-peopleListBtn">
          <div class="ms-Persona ms-Persona--selectable ms-Persona--sm">
            <div class="ms-Persona-imageArea">
              <div class="ms-Persona-initials ms-Persona-initials--lightGreen">MG</div>
            </div>
            <div class="ms-Persona-presence"></div>
            <div class="ms-Persona-details">
              <div class="ms-Persona-primaryText">Marcel Groce</div>
              <div class="ms-Persona-secondaryText">Marketing</div>
            </div>
          </div>
        </div>
      </li>
      <li class="ms-PeoplePicker-peopleListItem ms-PeoplePicker-result">
        <div tabindex="0" role="button" class="ms-PeoplePicker-peopleListBtn">
          <div class="ms-Persona ms-Persona--selectable ms-Persona--sm">
            <div class="ms-Persona-imageArea">
              <div class="ms-Persona-initials ms-Persona-initials--black">GS</div>
            </div>
            <div class="ms-Persona-presence"></div>
            <div class="ms-Persona-details">
              <div class="ms-Persona-primaryText">Grant Steel</div>
              <div class="ms-Persona-secondaryText">Public Relations</div>
            </div>
          </div>
        </div>
      </li>
      <li class="ms-PeoplePicker-peopleListItem ms-PeoplePicker-result">
        <div tabindex="0" role="button" class="ms-PeoplePicker-peopleListBtn">
          <div class="ms-Persona ms-Persona--selectable ms-Persona--sm">
            <div class="ms-Persona-imageArea">
              <div class="ms-Persona-initials ms-Persona-initials--teal">HW</div>
            </div>
            <div class="ms-Persona-presence"></div>
            <div class="ms-Persona-details">
              <div class="ms-Persona-primaryText">Harvey Wallin</div>
              <div class="ms-Persona-secondaryText">Delivery</div>
            </div>
          </div>
        </div>
      </li>
      <li class="ms-PeoplePicker-peopleListItem ms-PeoplePicker-result">
        <div tabindex="0" role="button" class="ms-PeoplePicker-peopleListBtn">
          <div class="ms-Persona ms-Persona--selectable ms-Persona--sm">
            <div class="ms-Persona-imageArea">
              <div class="ms-Persona-initials ms-Persona-initials--purple">ML</div>
            </div>
            <div class="ms-Persona-presence"></div>
            <div class="ms-Persona-details">
              <div class="ms-Persona-primaryText">Marcus Lauer</div>
              <div class="ms-Persona-secondaryText">Marketing</div>
            </div>
          </div>
        </div>
      </li>
    </ul>
    <div class="ms-PeoplePicker-searchMore js-searchMore">
      <div tabindex="0" role="button" class="ms-PeoplePicker-searchMoreBtn">
        <div class="ms-PeoplePicker-searchMoreIcon">
          <i class="ms-Icon ms-Icon--search"></i>
        </div>
        <div class="ms-PeoplePicker-searchMorePrimary">Search Contacts &amp; Directory</div>
      </div>
    </div>
  </div>
  <!-- Members list -->
  <div class="ms-PeoplePicker-selected is-active">
    <div class="ms-PeoplePicker-selectedHeader">
      <span class="ms-PeoplePicker-selectedCount">3</span> member<span>s</span>
    </div>
    <ul class="ms-PeoplePicker-selectedPeople">
      <li class="ms-PeoplePicker-selectedPerson">
        <div class="ms-Persona ms-Persona--sm">
          <div class="ms-Persona-imageArea">
            <div class="ms-Persona-initials ms-Persona-initials--blue">AL</div>
            <img class="ms-Persona-image" src="../persona/Persona.Person2.png" alt="Persona image">
          </div>
          <div class="ms-Persona-presence"></div>
          <div class="ms-Persona-details">
            <div class="ms-Persona-primaryText">Alton Lafferty</div>
            <div class="ms-Persona-secondaryText">Accountant</div>
          </div>
        </div>
        <button class="ms-PeoplePicker-resultAction js-selectedRemove"><i class="ms-Icon ms-Icon--x"></i></button>
      </li>
      <li class="ms-PeoplePicker-selectedPerson">
        <div class="ms-Persona ms-Persona--sm">
          <div class="ms-Persona-imageArea">
            <div class="ms-Persona-initials ms-Persona-initials--green">DF</div>
          </div>
          <div class="ms-Persona-presence"></div>
          <div class="ms-Persona-details">
            <div class="ms-Persona-primaryText">Douglas Fielder</div>
            <div class="ms-Persona-secondaryText">Public Relations</div>
          </div>
        </div>
        <button class="ms-PeoplePicker-resultAction js-selectedRemove"><i class="ms-Icon ms-Icon--x"></i></button>
      </li>
      <li class="ms-PeoplePicker-selectedPerson">
        <div class="ms-Persona ms-Persona--sm">
          <div class="ms-Persona-imageArea">
            <div class="ms-Persona-initials ms-Persona-initials--purple">ML</div>
          </div>
          <div class="ms-Persona-presence"></div>
          <div class="ms-Persona-details">
            <div class="ms-Persona-primaryText">Marcus Lauer</div>
            <div class="ms-Persona-secondaryText">Technical Support</div>
          </div>
        </div>
        <button class="ms-PeoplePicker-resultAction js-selectedRemove"><i class="ms-Icon ms-Icon--x"></i></button>
      </li>
    </ul>
  </div>
  <div class="ms-PeoplePicker-personaCard">
    @@include('../PersonaCard/PersonaCard.html')
  </div>
</div>